<template>
  <div>
    <Drawer :drawer="fwDrawer" :getDrawer="offFw" size="6rem" direction="btt">
      <div class="fwDrawer flex">
        <div class="fwDrawerBox1 flex b-b-1">
          服务说明
          <img
            class="fwDrawerBox1Img"
            src="../../../../assets/zfc-img/断货王/商品详情/关闭.png"
            alt=""
            @click="offFw()"
          />
        </div>
        <div class="fwDrawerBox2 b-b-1">
          <img
            class="fwDrawerCImg fwDrawerCImg1"
            src="../../../../assets/zfc-img/断货王/商品详情/NO.png"
            alt=""
          />
          <div class="fwDrawerCBox">
            <div class="fwDrawerCHText h28lh28ma f28ce5">不支持7天无忧退货</div>
            <p class="fwDrawerCP">
              该商品特殊性，一经售出不存在质量问题不享受7天无理由退换。请在收到商品后在拆封或试穿之前仔细检查外观和附属品。
            </p>
          </div>
        </div>
        <div class="fwDrawerBox3 b-b-1">
          <img
            class="fwDrawerCImg fwDrawerCImg2"
            src="../../../../assets/zfc-img/断货王/商品详情/直邮.png"
            alt=""
          />
          <div class="fwDrawerCBox">
            <div class="fwDrawerCHText h28lh28ma f28c4c">海外直邮</div>
            <p class="fwDrawerCP fwDrawerCPDeBug">
              下单后英国直邮商品平均7-10个工作日发货，发货后平均12-20个工作日到货，特殊情况除外。包裹将由专业国际物流公司为您发货，无s法送达的地址可能会转为其他物流。
            </p>
          </div>
        </div>
        <div class="fwDrawerBox4">
          <img
            class="fwDrawerCImg fwDrawerCImg3"
            src="../../../../assets/zfc-img/断货王/商品详情/正品.png"
            alt=""
          />
          <div class="fwDrawerCBox">
            <div class="fwDrawerCHText h28lh28ma f28c4c">正品保证</div>
            <p class="fwDrawerCP">本商品绝对正品保证。</p>
          </div>
        </div>
      </div>
    </Drawer>
    <Drawer :drawer="slDrawer" :getDrawer="offSl" size="6rem" direction="btt">
      <div class="fwDrawer flex">
        <div class="fwDrawerBox1 flex b-b-1">
          税费说明
          <img
            class="fwDrawerBox1Img"
            src="../../../../assets/zfc-img/断货王/商品详情/关闭.png"
            alt=""
            @click="offSl()"
          />
        </div>
        <div class="fwDrawerBox2 slDrawerBox b-b-1">
          <div class="slHr"></div>
          <div class="slDrawerH flex lh35">商品进口税</div>
          <div class="slDrawerP lh35">
            因您所购买的商品可能适用不同税率，可能导致无法全额包税，您仍需再行支付剩余税款（如有）详见下单页面。
          </div>
        </div>
        <div class="fwDrawerBox3 slDrawerBox b-b-1">
          <div class="slHr"></div>
          <div class="slDrawerH flex lh35">进口税税率</div>
          <div class="slDrawerP lh35">12%</div>
          <div class="slDrawerPadd">
            （中国海关规定，不同类目的商品征收税率不同，该商品的进口税率为12%）
          </div>
        </div>
        <div class="fwDrawerBox4 slDrawerBox">
          <div class="slHr"></div>
          <div class="slDrawerH flex lh35">进口税计算</div>
          <div class="slDrawerP lh35">进口税=商品完税价格（包括运费）*税率</div>
          <div class="slDrawerPadd">（完税价格由海关最终认定）</div>
        </div>
      </div>
    </Drawer>
    <div class="exBox">
      <TopBack textContent="商品详情" :cssTextC="{ textAlign: 'center' }" />
      <div>
        <router-link to="/" class="topIconBox topIconBox1">
          <img
            class="topIcon topIcon1"
            src="../../../../assets/zfc-img/断货王/商品详情/首页图标.png"
            alt=""
          />
        </router-link>
        <router-link to="/" class="topIconBox topIconBox2">
          <img
            class="topIcon topIcon2"
            src="../../../../assets/zfc-img/断货王/商品详情/分享图标.png"
            alt=""
          />
        </router-link>
        <router-link to="/" class="topIconBox topIconBox3">
          <img
            class="topIcon topIcon3"
            src="../../../../assets/zfc-img/断货王/商品详情/购物车图标.png"
            alt=""
          />
        </router-link>
      </div>
      <Map :swiperBoxCss="{ width: '100%' }" data="api/small/commodity/v1/bannerShow" />
      <div v-if="!spProOutlineFalg" class="spProOutlineBox">
        <span class="spProOutlineText spProOutlineText1">抢购价：</span>
        <span class="spProOutlineText spProOutlineText2">{{ spInfo.newPro }}</span>
        <span class="spProOutlineText spProOutlineText3"
          >今天{{ spInfo.newTime }}限量开抢</span
        >
        <span class="spProOutlineText spProOutlineText4">提醒我</span>
      </div>
      <div v-if="spProOutlineFalg" class="spProOutlineBox">
        <span class="spProOutlineOnText"
          >还剩{{ spInfo.spProOutlineNum }}件，再不抢购就没了哦~</span
        >
      </div>
      <div class="spProInfoBox">
        <div class="spProInfoTopTextBox">
          <div class="spProInfoTopTextImgBox">
            <img class="spProInfoTopTextImg" :src="spInfo.ydImgUrl" alt="" />
          </div>
          <span class="spProInfoTopText spProInfoTopText1">{{ spInfo.ydStyle }}</span>
          <span class="spProInfoTopText spProInfoTopText2">{{ spInfo.name }}</span>
        </div>
        <div class="spProInfoBtmTextBox">
          <span class="spProInfoBtmText1">{{ spInfo.pro }}</span>
          <span class="spProInfoBtmText2">关税：{{ spInfo.gs }}</span>
          <span class="spProInfoBtmText3">邮费：{{ spInfo.yf }}</span>
          <div class="spProInfoBtmTextInfoBox" @click="openSl()">
            <span class="spProInfoBtmTextInfoText">详情</span>
            <img
              class="spProInfoBtmTextInfoImg"
              src="../../../../assets/zfc-img/断货王/商品详情/详情右箭头.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="spJfg">
        <img
          class="spJfgImg"
          src="../../../../assets/zfc-img/断货王/商品详情/积分购图标.png"
          alt=""
        />
        <span class="spJfgText">500000积分可抵500元，限购1件</span>
      </div>
      <div class="spFw" @click="openFw()">
        <div class="spFwL">
          <img
            class="spFwLImg"
            src="../../../../assets/zfc-img/断货王/商品详情/NO.png"
            alt=""
          />
          <span class="spFwLText">不支持7天无忧退换</span>
        </div>
        <div class="spFwC">
          <img
            class="spFwCImg"
            src="../../../../assets/zfc-img/断货王/商品详情/直邮.png"
            alt=""
          />
          <span class="spFwCText">海外直邮</span>
        </div>
        <div class="spFwR">
          <img
            class="spFwRImg"
            src="../../../../assets/zfc-img/断货王/商品详情/正品.png"
            alt=""
          />
          <span class="spFwRText">正品保证</span>
        </div>
        <div class="spFwGo">
          <img
            class="spFwGoImg"
            src="../../../../assets/zfc-img/断货王/商品详情/展开箭头.png"
            alt=""
          />
        </div>
      </div>
      <div class="noAddressBox">
        <div class="spProInfoTopTextImgBox">
          <img class="spProInfoTopTextImg" :src="spInfo.ydImgUrl" alt="" />
        </div>
        <span class="noAddressText"
          >直邮，下单时需要提供真实姓名和身份证号以及收货地址
          请先去添加并填写这些信息</span
        >
        <router-link to="#" class="addAddressBtn"> 去添加 </router-link>
      </div>
      <div class="hr1"></div>
      <div class="spEvaluateH1Box">
        <div class="spEvaluateH1Text1Box">
          <div class="spEvaluateH1TextImg"></div>
          <span class="spEvaluateH1Text">阿拉粉心得</span>
        </div>
        <div class="spEvaluateH1Text2Box">
          <span class="spEvaluateH2Text" @click="goXdList()">查看更多</span>
          <img
            class="spEvaluateH2TextImg"
            src="../../../../assets/zfc-img/断货王/商品详情/展开箭头.png"
            alt=""
          />
        </div>
      </div>
      <div class="spEvaluateCBox">
        <div
          class="spEvaluateCInfoBox"
          v-for="(v, k) in spEvaluateCInfoArr"
          :key="k + 'Evaluate'"
          @click="goXdInfo()"
        >
          <span class="spEvaluateCInfoText">{{ v.text }}</span>
          <div class="spEvaluateCInfoImgBox">
            <img
              class="spEvaluateCInfoImg"
              src="../../../../assets/zfc-img/断货王/商品详情/用户图标.png"
              alt=""
            />
          </div>
          <span class="spEvaluateCInfoName">{{ v.name }}</span>
        </div>
      </div>
      <div class="hr2" @click="goBrandInfo()"></div>
      <div class="spPpInfoBox" @click="goBrandInfo()">
        <div class="spPpInfo1Box">
          <div class="spPpInfo1ImgBox">
            <img :src="spPpInfo.imgUrl" alt="品牌标志" />
          </div>
          <div class="spPpInfo1Text1">
            <span class="spPpInfo1Text1Span1">{{ spPpInfo.name }}</span>
            <span class="spPpInfo1Text1Span2">{{ spPpInfo.nameTag }}</span>
          </div>
          <div class="spPpInfo1Text2">
            查看<span class="spPpInfo1Text2Span">10</span>件商品
          </div>
          <div class="sub" @click.stop="">
            <img
              class="subImg"
              src="../../../../assets/zfc-img/断货王/商品详情/加号.png"
              alt=""
            />关注
          </div>
        </div>
        <div class="spPpInfo2Box">{{ spPpInfo.text }}</div>
      </div>
      <div class="spAddBox flex">
        <div class="spAddDivBox" v-for="(v, k) in spAddArr" :key="k + 'apaddinfo'">
          <div class="spAddImgBox flex">
            <img :src="v.imgUrl" alt="" />
          </div>
          <div class="spAddText flex">{{ v.name }}</div>
          <div class="spAddPro flex">{{ v.pro }}</div>
        </div>
      </div>
      <div class="hr3"></div>
      <div class="spJsBox">
        <div class="spJsHBox flex b-b-1">
          <div class="spJsHImg"></div>
          <div class="spJsHText f30c3">商品描述</div>
        </div>
        <div class="spMsPBox b-b-1">
          <div class="">
            <p class="spMsPText f24c4c">{{ spInfo.ms }}</p>
          </div>
        </div>
        <div class="spJsHBox flex b-b-1">
          <div class="spJsHImg"></div>
          <div class="spJsHText f30c3">使用方法</div>
        </div>
        <div class="spMsPBox spSsPBox b-b-1">
          <div class="spSsPText flex f24c4c" v-for="(v, k) in spInfo.ss" :key="k + 'ss'">
            {{ v }}
          </div>
        </div>
        <div class="spJsHBox flex b-b-1">
          <div class="spJsHImg"></div>
          <div class="spJsHText f30c3">商品图片</div>
        </div>
        <div class="spMsPBox spSsPBox spImgBox flex b-b-1">
          <img
            class="spImg"
            v-for="(v, k) in spImgArr"
            :key="k + 'spImgArr'"
            :src="v"
            alt=""
          />
        </div>
      </div>
      <div class="hr4"></div>
      <div class="spTjHBox flex b-b-1">
        <div class="spTjHImg"></div>
        <div class="spTjHText flex f30c4c">阿拉粉在买</div>
      </div>
      <div class="spAddBox flex">
        <div class="spAddDivBox" v-for="(v, k) in spAddArr" :key="k + 'apaddinfo'">
          <div class="spAddImgBox flex">
            <img :src="v.imgUrl" alt="" />
          </div>
          <div class="spAddText flex">{{ v.name }}</div>
          <div class="spAddPro flex">{{ v.pro }}</div>
        </div>
      </div>
      <div class="hr5"></div>
      <div class="spTjHBox flex b-b-1">
        <div class="spTjHImg"></div>
        <div class="spTjHText flex f30c4c">服务承诺</div>
      </div>
      <div class="spServerBox">
        <div class="spServerItemBox flex">
          <div
            class="spServerItem"
            v-for="(v, k) in spServerArr"
            :key="k + 'spServerArr'"
          >
            <div class="spServerItemImgBox flex">
              <img class="spServerItemImg" :src="v.imgUrl" alt="" />
            </div>
            <span class="spServerItemText">{{ v.text }}</span>
          </div>
        </div>
      </div>
      <div class="spXtsBox b-b-1">
        <div class="spXtsImgBox flex">
          <div class="spXtsImgZ1Box">
            <div class="spXtsImgZ1 flex">
              <img
                class="spXtsImgZ1Img"
                src="../../../../assets/zfc-img/断货王/商品详情/小贴士图标.png"
                alt=""
              />
              <span class="spXtsImgZ1Text">小贴士</span>
              <div class="spXtsImgZ2L"></div>
              <div class="spXtsImgZ2R"></div>
            </div>
          </div>
        </div>
        <p class="spXtsText" v-for="(v, k) in spXtsTextArr" :key="k + 'spXtsTextArr'">
          {{ v }}
        </p>
      </div>
      <div class="spBtnBox flex">
        <div class="spBtn1 flex">
          <img
            class="spBtn1Img"
            src="../../../../assets/zfc-img/断货王/商品详情/客服.png"
            alt=""
          />
          <span class="spBtn1Text">在线客服</span>
        </div>
        <div class="spBtn2 flex">加入购物车</div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../TopNav/TopBack";
import Map from "../map/index";
import Drawer from "../Fl/Leaflets/drawer1";
import axios from "axios";
export default {
  name: "DhwSpInfo",
  data() {
    return {
      spProOutlineFalg: false, // 抢购开关
      fwDrawer: false, // 控制服务抽屉
      slDrawer: false, // 控制税率抽屉
      // mapData: this.getInfo(),
      // [
      //   {
      //     imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例1.png"),
      //   },
      //   {
      //     imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例2.png"),
      //   },
      //   {
      //     imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例3.png"),
      //   },
      //   {
      //     imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例1.png"),
      //   },
      //   {
      //     imgUrl: require("../../../../assets/zfc-img/断货王/商品图范例2.png"),
      //   },
      // ],
      spInfo: {
        spProOutlineNum: 100,
        newPro: "￥129.08",
        newTime: "15:00",
        ydImgUrl: require("../../../../assets/zfc-img/断货王/商品详情/英国国旗.png"),
        ydStyle: "英国直邮",
        name: "焕彩萃璨花蕊唇彩4.8g焕彩萃璨花蕊唇彩4.8g 焕彩萃璨花蕊唇彩4.8g",
        pro: "￥169",
        gs: "￥10",
        yf: "￥50",
        ms:
          "该模块主要用来描述上面产品，模块大小根据商品描述的内容多少来决定。该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要用来描述上面产品该模块主要模块主要用来描述上面产品该模块主要模块主要用来描述上面产品该模块主要模块主要用来描述上面产品该模块主要模块主要用来描述上面产品该模块主要",
        ss: [
          "1.该模块用来介绍商品的使用方法",
          "2.该模块的大小同样取决于该使用方法的内容多少",
          "3.所以该模块活动性比较大",
        ],
      },
      spPpInfo: {
        imgUrl: "",
        name: "品牌名字品牌名字",
        nameTag: "英国最大彩妆品牌",
        text:
          "品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍品牌介绍",
      },
      spEvaluateCInfoArr: [
        {
          name: "霜霜",
          text: "颜色涂抹上去看着很漂亮，棒棒哒！",
          falg: false,
        },
        {
          name: "爱美丽",
          text: "美美的！！！",
          falg: false,
        },
        {
          name: "爱美丽",
          text: "美美的！！！",
          falg: false,
        },
      ],
      spAddArr: [
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌产品1.png"),
          name: "会呼吸丝滑蜜粉",
          pro: "￥199",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌产品2.png"),
          name: "BB矿物粉饼9g",
          pro: "￥299",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/品牌产品3.png"),
          name: "植萃腮红胭脂",
          pro: "￥188",
        },
      ],
      spImgArr: [
        require("../../../../assets/zfc-img/断货王/商品图范例1.png"),
        require("../../../../assets/zfc-img/断货王/商品图范例2.png"),
        require("../../../../assets/zfc-img/断货王/商品图范例3.png"),
      ],
      spServerArr: [
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/正品保证.png"),
          text: "正品保证",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/海外直邮.png"),
          text: "海外直邮",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/超时发货补偿.png"),
          text: "超时发货补偿",
        },
        {
          imgUrl: require("../../../../assets/zfc-img/断货王/商品详情/PICC.png"),
          text: "PICC承诺",
        },
      ],
      spXtsTextArr: [
        "运费相关：英国直邮商品相关运费为50元。",
        "价格说明：划线价、国内参考价、店头价可能是品牌专柜价、吊牌价或品牌商提供的指导价等价格，其受国家地区、时间和市场行情波动的影响而可能与您购物时看到的不一致，该价格仅供参考。",
        "商品包装：海外商品包装更换较为频繁，因此顾客您收到的货品有可能与图片不完全一致，页面图片及描述仅供参考，请以您最终收到的实物为准，由此给您带来的不便请您多谅解。",
        "服务承诺：阿拉灯承诺站内销售商品均为海外原装正品，并会持续为顾客们带来海外最新商品。",
      ],
    };
  },
  methods: {
    openFw() {
      this.fwDrawer = true;
      console.log(this.fwDrawer, "传输开启属性");
    },
    offFw() {
      this.fwDrawer = false;
      console.log(this.fwDrawer, "传输关闭属性");
    },
    openSl() {
      this.slDrawer = true;
      console.log(this.slDrawer, "传输开启属性");
    },
    offSl() {
      this.slDrawer = false;
      console.log(this.slDrawer, "传输关闭属性");
    },
    goBrandInfo() {
      this.$router.push({ name: "DhwBrandInfo" });
    },
    goXdList() {
      this.$router.push({ name: "DhwXd" });
    },
    goXdInfo() {
      this.$router.push({ name: "DhwXdInfo" });
    },
    getSpInfo(url, header, param) {
      axios
        .get("api/small/commodity/v1/findCommodityDetailsById", {
          headers: {
            userId: this.$store.state.userId,
            sessionId: this.$store.state.sessionId,
          },
          params: {
            commodityId: 6,
          },
        })
        .then((res) => {
          console.log(res);
        });
      console.log(this.$store.state.userId, this.$store.state.sessionId, "输出信息");
      axios
        .get("api/small/user/verify/v1/getUserById", {
          headers: {
            userId: 84370,
            sessionId: "161033238540384370",
            // token: JSON.stringify({ userId: 84370, sessionId: "161033238540384370" }),
          },
        })
        .then((res) => {
          console.log("修改昵称");
          console.log(res);
        });
    },
  },
  mounted() {
    this.getSpInfo();
  },
  components: {
    TopBack,
    Map,
    Drawer,
  },
};
</script>

<style scoped>
* {
  font-size: 0;
}
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.exBox {
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 999;
}
.topIconBox {
  height: 0.96rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.topIconBox1 {
  position: fixed;
  top: 0;
  right: 0.2rem;
}
.topIconBox2 {
  position: fixed;
  top: 0;
  right: 0.78rem;
}
.topIconBox3 {
  position: fixed;
  top: 0;
  right: 1.34rem;
}
.spProOutlineBox {
  height: 1rem;
  padding: 0 0.2rem;
  background-color: #e53e42;
  display: flex;
  align-items: center;
  position: relative;
}
.spProOutlineText1,
.spProOutlineText2 {
  font-size: 0.3rem;
  color: #ffffff;
}
.spProOutlineText3 {
  font-size: 0.24rem;
  color: #ffffff;
  margin-left: 0.78rem;
}
.spProOutlineText4 {
  width: 1.2rem;
  height: 0.4rem;
  font-size: 0.24rem;
  color: #e53e42;
  border-radius: 0.2rem;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.34rem;
  right: 0.2rem;
}
.spProInfoBox {
  height: 2.28rem;
  padding: 0 0.2rem;
  position: relative;
  border-bottom: 0.01rem solid #cccccc;
}
.spProInfoTopTextBox {
  height: 0.76rem;
  padding-top: 0.15rem;
  padding-left: 0.6rem;
}
.spProInfoTopTextImgBox {
  width: 0.38rem;
  height: 0.28rem;
  border: 0.01px solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.2rem;
  left: 0.21rem;
}
.spProInfoTopText {
  font-size: 0.3rem;
  line-height: 0.38rem;
}
.spProInfoTopText1 {
  color: #e53e42;
  margin-right: 0.23rem;
}
.spProInfoTopText2 {
  color: #333333;
}
.spProInfoBtmTextBox {
  height: 1.37rem;
  padding: 0 0.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.spProInfoBtmText1 {
  height: 0.36rem;
  line-height: 0.36rem;
  font-size: 0.36rem;
  color: #e53e42;
  padding-top: 0.19rem;
}
.spProInfoBtmText2 {
  height: 0.23rem;
  line-height: 0.23rem;
  font-size: 0.24rem;
  color: #4c4c4c;
  padding-top: 0.12rem;
}
.spProInfoBtmText3 {
  height: 0.23rem;
  line-height: 0.23rem;
  font-size: 0.24rem;
  color: #4c4c4c;
  padding-top: 0.13rem;
}
.spProInfoBtmTextInfoBox {
  width: 0.58rem;
  height: 0.22rem;
  border: 0.01rem solid #e53e42;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.67rem;
  left: 1.69rem;
}
.spProInfoBtmTextInfoText {
  display: block;
  height: 100%;
  line-height: 0.22rem;
  font-size: 0.16rem;
  color: #e53e42;
  margin-right: 0.07rem;
  position: relative;
  top: 0.02rem;
}
.spProInfoBtmTextInfoImg {
  width: 0.08rem;
  height: 0.14rem;
}
.spJfg,
.spFw {
  height: 0.6rem;
  padding: 0 0.2rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  align-items: center;
}
.spJfgImg {
  width: 0.78rem;
  height: 0.3rem;
  margin-right: 0.28rem;
}
.spJfgText {
  font-size: 0.24rem;
  color: #4c4c4c;
}
.spFwL,
.spFwC,
.spFwR,
.spFwGo {
  height: 100%;
  display: flex;
  align-items: center;
}
.spFwL {
  margin-right: 0.73rem;
}
.spFwC {
  margin-right: 1rem;
}
.spFwR {
  margin-right: 0.23rem;
}
.spFwLImg {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.spFwCImg {
  width: 0.34rem;
  height: 0.33rem;
  margin-right: 0.05rem;
}
.spFwRImg {
  width: 0.3rem;
  height: 0.3rem;
  margin-right: 0.05rem;
}
.spFwGoImg {
  width: 0.14rem;
  height: 0.24rem;
}
.spFwLText,
.spFwCText,
.spFwRText {
  font-size: 0.2rem;
}
.spFwLText {
  color: #e53e42;
}
.spFwCText,
.spFwRText {
  color: #4c4c4c;
}
.noAddressBox {
  height: 1rem;
  padding: 0 0.2rem;
  padding-left: 0.8rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  align-items: center;
  position: relative;
}
.noAddressText {
  width: 6.02rem;
  height: 0.66rem;
  line-height: 0.33rem;
  font-size: 0.24rem;
  color: #e53e42;
}
.addAddressBtn {
  width: 0.78rem;
  height: 0.28rem;
  font-size: 0.18rem;
  color: #e53e42;
  border: 0.01rem solid #e53e42;
  border-radius: 0.03rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.6rem;
  right: 0.2rem;
}
.hr1 {
  height: 0.12rem;
  background-color: #f2f2f2;
}
.spEvaluateH1Box {
  height: 1rem;
  padding: 0 0.2rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.spEvaluateH1Text1Box,
.spEvaluateH1Text2Box {
  display: flex;
  align-items: center;
}
.spEvaluateH1Text2Box {
  text-align: right;
}
.spEvaluateH1TextImg {
  width: 0.06rem;
  height: 0.3rem;
  background-color: #e53e42;
  margin-right: 0.06rem;
}
.spEvaluateH1Text {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.3rem;
  color: #4c4c4c;
}
.spEvaluateH2Text {
  height: 0.2rem;
  line-height: 0.2rem;
  font-size: 0.2rem;
  color: #4c4c4c;
}
.spEvaluateH2TextImg {
  width: 0.12rem;
  height: 0.2rem;
  margin-left: 0.07rem;
}
.spEvaluateCBox {
  height: 2.39rem;
  padding-left: 0.2rem;
  border-bottom: 0.01rem solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spEvaluateCInfoBox {
  width: 2.18rem;
  height: 1.98rem;
  margin-right: 0.2rem;
  border: 0.01rem solid #cccccc;
  border-radius: 0.09rem;
  position: relative;
}
.spEvaluateCInfoText {
  display: block;
  width: 1.92rem;
  height: 0.96rem;
  font-size: 0.24rem;
  color: #4c4c4c;
  margin: 0 auto;
  padding-top: 0.15rem;
}
.spEvaluateCInfoImgBox {
  width: 0.38rem;
  height: 0.38rem;
  border: 0.01rem solid #cdcdcd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0.19rem;
  left: 0.09rem;
}
.spEvaluateCInfoName {
  height: 0.18rem;
  line-height: 0.18rem;
  font-size: 0.18rem;
  color: #4c4c4c;
  position: absolute;
  bottom: 0.3rem;
  left: 0.59rem;
}
.hr2 {
  height: 0.19rem;
  color: #f2f2f2;
}
.spPpInfoBox {
  height: 2rem;
  border-bottom: 0.01rem solid #cccccc;
}
.spPpInfo1Box {
  height: 0.6rem;
  margin: 0 0.2rem;
  margin-left: 0.8rem;
  margin-bottom: 0.31rem;
  position: relative;
}
.spPpInfo1ImgBox {
  width: 0.58rem;
  height: 0.58rem;
  border: 0.01rem solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: -0.6rem;
}
.spPpInfo1Text1,
.spPpInfo1Text2 {
  height: 50%;
  margin-left: 0.1rem;
  display: flex;
  align-items: center;
}
.spPpInfo1Text1Span1 {
  font-size: 0.28rem;
  color: #333333;
  margin-right: 0.15rem;
}
.spPpInfo1Text1Span2 {
  font-size: 0.2rem;
  color: #4c4c4c;
}
.spPpInfo1Text2 {
  font-size: 0.2rem;
  color: #4c4c4c;
}
.spPpInfo1Text2Span {
  font-size: 0.24rem;
  color: #e53e42;
}
.sub {
  width: 0.98rem;
  height: 0.28rem;
  font-size: 0.2rem;
  color: #e53e42;
  border: 0.01rem solid #e53e42;
  border-radius: 0.14rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
}
.subImg {
  margin-right: 0.05rem;
}
.spPpInfo2Box {
  height: 0.72rem;
  line-height: 0.24rem;
  margin: 0 0.2rem;
  font-size: 0.18rem;
  color: #4c4c4c;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.spAddBox {
  height: 2.89rem;
}
.spAddDivBox {
  height: 100%;
  flex-grow: 1;
}
.spAddImgBox {
  height: 2.06rem;
}
.spAddText {
  height: 0.24rem;
  font-size: 0.24rem;
  color: #4c4c4c;
  margin-bottom: 0.09rem;
}
.spAddPro {
  height: 0.24rem;
  font-size: 0.24rem;
  color: #e53e42;
}
.hr3 {
  height: 0.2rem;
  background-color: #f2f2f2;
}
.spMsBox {
  margin: 0 0.2rem;
}
.f30c3 {
  font-size: 0.3rem;
  color: #333333;
}
.f30c4c {
  font-size: 0.3rem;
  color: #4c4c4c;
}
.hf30 {
  height: 0.3rem;
  line-height: 0.3rem;
}
.f24c4c {
  font-size: 0.24rem;
  color: #4c4c4c;
}
.b-b-1 {
  border-bottom: 0.01rem solid #cccccc;
}
.spJsBox {
  margin: 0 0.2rem;
}
.spJsHBox {
  height: 0.6rem;
  justify-content: flex-start;
}
.spJsHImg {
  width: 0.06rem;
  height: 0.3rem;
  margin-right: 0.03rem;
  background-color: #e53e42;
}
.spJsHText {
  height: 0.03re;
  line-height: 0.3rem;
}
.spMsPBox {
  max-height: 99999999rem;
  margin-top: 0.15rem;
  padding-bottom: 0.13rem;
}
.spMsPText {
  display: inline-block;
  line-height: 0.33rem;
  text-overflow: ellipsis;
}
.spSsPBox {
  margin-top: 0;
  padding: 0.13rem 0 0.14rem 0;
}
.spSsPText {
  height: 0.37rem;
  justify-content: flex-start;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.spImgBox {
  flex-direction: column;
}
.spImg {
  margin-bottom: 0.5rem;
}
.hr4 {
  padding-top: 0.2rem;
  background-color: #f2f2f2;
}
.spTjHBox {
  height: 0.6rem;
  padding: 0 0.2rem;
  justify-content: flex-start;
}
.spTjHImg {
  width: 0.06rem;
  height: 0.3rem;
  margin-right: 0.06rem;
  background-color: #e53e42;
}
.spTjHText {
  height: 0.3rem;
  line-height: 0.3rem;
}
.hr5 {
  height: 0.2rem;
  background-color: #f2f2f2;
}
.spServerBox {
  height: 1.85rem;
  padding: 0 0.2rem;
}
.spServerItemBox {
  width: 100%;
  height: 100%;
}
.spServerItem {
  height: 100%;
  flex-grow: 1;
}
.spServerItemImgBox {
  height: 1.23rem;
}
.spServerItemText {
  display: block;
  height: 0.18rem;
  line-height: 0.18rem;
  font-size: 0.18rem;
  color: #4c4c4c;
  text-align: center;
}
.spXtsBox {
  padding: 0 0.2rem;
  background-color: #f2f2f2;
}
.spXtsImgBox {
  height: 0.78rem;
  margin-bottom: 0.03rem;
}
.spXtsImgZ1Box {
  width: 2.6rem;
  height: 0.5rem;
  border: 0.01rem solid #808080;
  border-radius: 0.03rem;
  position: relative;
  top: -0.06rem;
  right: -0.06rem;
}
.spXtsImgZ1 {
  width: 100%;
  height: 100%;
  border-radius: 0.03rem;
  background-color: #808080;
  position: relative;
  top: 0.06rem;
  right: 0.06rem;
}
.spXtsImgZ2L {
  width: 1.8rem;
  border: 0.02rem solid #cccccc;
  position: absolute;
  top: 0.24rem;
  left: -1.35rem;
}
.spXtsImgZ2R {
  width: 1.8rem;
  border: 0.02rem solid #cccccc;
  position: absolute;
  top: 0.24rem;
  right: -1.35rem;
}
.spXtsImgZ1Img {
  width: 0.36rem;
  height: 0.36rem;
  margin-right: 0.1rem;
}
.spXtsImgZ1Text {
  display: block;
  height: 0.24rem;
  line-height: 0.24rem;
  font-size: 0.24rem;
  color: #ffffff;
}
.spXtsText {
  max-height: 999999999rem;
  line-height: 0.36rem;
  padding-bottom: 0.06rem;
  font-size: 0.24rem;
  color: #4c4c4c;
}
.spBtnBox {
  width: 100%;
  height: 0.96rem;
}
.spBtn1 {
  width: 50%;
  height: 100%;
}
.spBtn1Img {
  width: 0.37rem;
  height: 0.3rem;
  margin-right: 0.15rem;
}
.spBtn1Text {
  font-size: 0.28rem;
  color: #4c4c4c;
}
.spBtn2 {
  width: 50%;
  height: 100%;
  font-size: 0.28rem;
  color: #ffffff;
  background-color: #e53e42;
}
.fwDrawer {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
}
.fwDrawerBox1 {
  width: calc(100% - 0.4rem);
  height: 0.8rem;
  padding: 0 0.2rem;
  font-size: 0.28rem;
  color: #333333;
  position: relative;
}
.fwDrawerBox1Img {
  position: absolute;
  top: 0.28rem;
  right: 0.2rem;
}
.fwDrawerBox2 {
  width: calc(100% - 0.4rem);
  height: 1.76rem;
  padding: 0 0.2rem;
  position: relative;
}
.fwDrawerBox3 {
  width: calc(100% - 0.4rem);
  height: 1.8rem;
  padding: 0 0.2rem;
  position: relative;
}
.fwDrawerBox4 {
  width: calc(100% - 0.4rem);
  padding: 0 0.2rem;
  position: relative;
}
.fwDrawerCBox {
  height: 100%;
  margin-left: 0.5rem;
}
.fwDrawerCImg {
  position: absolute;
  left: 0.2rem;
}
.fwDrawerCImg1 {
  top: 0.19rem;
}
.fwDrawerCImg2 {
  top: 0.2rem;
}
.fwDrawerCImg3 {
  top: 0.2rem;
}
.fwDrawerCP {
  max-height: 999999999rem;
  line-height: 0.36rem;
  font-size: 0.24rem;
  color: #808080;
}
.fwDrawerCPDeBug {
  width: calc(100% + 0.15rem);
}
.h28lh28ma {
  height: 0.28rem;
  line-height: 0.28rem;
  padding: 0.19rem 0 0.08rem 0;
}
.f28ce5 {
  font-size: 0.28rem;
  color: #e53e42;
}
.f28c4c {
  font-size: 0.28rem;
  color: #4c4c4c;
}
.spProOutlineOnText {
  font-size: 0.3rem;
  color: #ffffff;
}
.lh35 {
  line-height: 0.35rem;
}
.slHr {
  width: 100%;
  padding: 0.15rem;
}
.slDrawerH {
  display: inline-block;
  width: 1.42rem;
  max-height: 999999999rem;
  vertical-align: top;
  font-size: 0.28rem;
  color: #4c4c4c;
}
.slDrawerP {
  display: inline-block;
  width: calc(100% - 1.42rem - 0.15rem);
  max-height: 999999999rem;
  margin-left: 0.15rem;
  vertical-align: top;
  font-size: 0.24rem;
  color: #4c4c4c;
}
.slDrawerPadd {
  line-height: 0.32rem;
  font-size: 0.24rem;
  color: #808080;
  position: absolute;
  top: 0.7rem;
  left: 1.57rem;
}
</style>
